{% extends 'management/base.html' %}

{% block css_js %}
    {% if mes %}
        <script>alert('{{ mes }}')</script>
    {% endif %}
{% endblock %}

{% block end %}
        <div class="container-fluid" style="margin: 30px 10% 0">
            <div class="row">
                <div class="col-md-6" style="margin: 18px 0;">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                        <label for="exampleInputEmail">URL</label><br>

                    <div class="list-group" id="url_value_div">
                        <form action="{% url 'authorityManagement:add_url' %}" method="post">
                            {% csrf_token %}
                            <input type="text" class="form-control" placeholder="回车提交" name="url_value" minlength="1" required>
                        </form>
                    </div>

                    <form action="{% url 'authorityManagement:management' %}" method="post">
                    {% csrf_token %}

                        <button id="url_btn" type="button" class="btn btn-primary btn-lg btn-block">增 加 一 条 URL 信 息</button>

                    {% for id, url in urls %}
                        <div class="radio">
                            <div class="list-group" id="list-{{ id }}">
                                <button type="button" class="list-group-item">
                                    <label>{{ forloop.counter }}&emsp;&emsp;&emsp;<input class="input-link" id="input-{{ id }}" type="radio" name="url_id" value="{{ id }}">{{ url }}</label>
                                </button>
                            </div>
                            <script>
                                $(function () {
                                    $('#list-{{ id }}').click(function () {
                                        $('#input-{{ id }}').prop('checked', true).siblings().removeAttr('checked');
                                    })
                                })
                            </script>
                        </div>
                    {% endfor %}

                    <script>
                        $(function () {
                            $('.radio').click(function () {
                                $('#duty_list').show(400);
                                $('#img').hide(600);
                            });
                            $('#url_btn').click(function () {
                                $('#url_btn').hide(200);
                                $('#url_value_div').show(500);
                            });
                            $('#duty_list').hide();
                            $('#url_value_div').hide();
                        })
                    </script>
                </div>

                <div id="duty_list" class="col-md-6" style="margin: 18px 0;">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                        <label for="exampleInputEmail">职务</label><br>
                        {% for id, duty in dutys %}
                            <div class="list-group" id="list--{{ id }}">
                                <button type="button" class="list-group-item">
                                    <label class="checkbox-inline">
                                        <input type="checkbox" id="input--{{ id }}" name="dutys" value="{{ id }}">
                                        <span>{{ duty }}</span>
                                    </label>
                                </button>
                                <script>
                                    $(function () {
                                        $('#list--{{ id }}').click(function () {
                                            let inp = $('#input--{{ id }}');
                                            if (inp.is(':checked')) {
                                                inp.removeAttr('checked');
                                             }
                                            else{
                                                inp.prop('checked', true);
                                             }
                                        })
                                    })
                                </script>
                            </div>
                        {% endfor %}
                    <button type="submit" class="btn btn-default">Submit</button>
                </div>

                <div id="img" class="col-md-6" style="margin: 18px 0;">
                    <img style="width: 90%" src="{{ img_url }}" alt="图片">
                </div>

            </div>
        </div>
    </form>
{% endblock %}